	// CONTENT: Produktion
	var contentProduction = 
		'<div class="infoWindow_image">'+
        '<img src="images/produktion.jpg" width="400" height="260">'+
		'<br><br>'+
		'</div>'+

	 	'<div class="infoWindow_head">'+
        'Changzhouqu: Produktion '+
		'</div>'+
		
		'<div class="infoWindow_text">'+
        'Die Produktion der Luxus-Massagesessel MSF2 und MSF3 findet in einer Möbelfabrik in der näheren Umgebung von Hong-Kong statt. Die Firma produziert in ihren Werkshallen eine Vielzahl verschiedener Möbelstücke. Die Verwendung von ausschließlich hochwertigen Materialen, in Verbindung mit modernsten Maschinen garantieren eine hochwertige Verarbeitung.' +
		'<br><br><br> '+
		'<div class="divLeft"><input class="buttonLeft" type="button" value="Schritt 1: Firmenzentrale" onclick="lastOne(0,5)";></div>'+
		'<div class="divRight"><input class="buttonRight" type="button" value="Schritt 3: Verschiffung" onclick="nextOne(2,8)";></div>'+
		'</div>';
		
		// CONTENT: Warenlager
		var contentPFFM = 
		'<div class="infoWindow_image">'+
        '<img src="images/lager.jpg" width="400" height="260">'+
		'<br><br>'+
		'</div>'+

	 	'<div class="infoWindow_head">'+
        'Warenlager '+
		'</div>'+
		
		'<div class="infoWindow_text">'+
        'Im Firmeneigenen Warenlager werden bereits hergestellte Möbel zwischengelagert. Von Zeit zu Zeit treffen neue Lieferungen aus Fernost ein. Geht eine Bestellung ein, werden die Produkte von hieraus per Spedition zum Kunden geliefert.'+
		'<br><br><br> '+
		'<div class="divLeft"><input class="buttonLeft" type="button" value="Schritt 4: Haburger Hafen" onclick="lastOne(3,5)";></div>'+
		'<div class="divRight"><input class="buttonRight" type="button" value="Schritt 6: Auslieferung" onclick="nextOne(5,8)";></div>'+
		'</div>';
		
		// CONTENT: Firmenzentrale
		var contentStart = 
		'<div class="infoWindow_image">'+
        '<img src="images/callcenter.jpg" width="400" height="260">'+
		'<br><br>'+
		'</div>'+

	 	'<div class="infoWindow_head">'+
        'Firmenzentrale: Bestellung '+
		'</div>'+
		
		'<div class="infoWindow_text">'+
        'Die Firmenzentrale der PFFM KG befindet sich in Zweibrücken. Von hier aus koordiniert die Firma alle Aktivitäten. Hier beginnt auch der Weg der Luxus-Massagestühle. In Absprache mit Handelspartnern in Hong-Kong werden Produkte gefertigt und nach Deutschland geliefert.'+
		'<br><br><br> '+
		'<div class="divRight"><input name="" class="buttonRight" type="button" value="Schritt 2: Produktion" onclick="nextOne(1,5)";></div>' 
		'</div>';
		
		// CONTENT: Hafen HongKong
		var contentHongKong = 
		'<div class="infoWindow_image">'+
        '<img src="images/hongkong.jpg" width="400" height="260">'+
		'<br><br>'+
		'</div>'+

	 	'<div class="infoWindow_head">'+
        'Hong-Kong: Verschiffung'+
		'</div>'+
		
		'<div class="infoWindow_text">'+
        'Nach der Produktion werden die Massagestühle zum nahegelegenen Hafen in Hong Kong verfrachtet. Nach Abwicklung aller Modalitäten verlassen die Massagestühle per Containerschiff den Hafen in Hong Kong.'+
		'<br><br><br> '+
		'<div class="divLeft"><input name="" class="buttonLeft" value="Schritt 2: Produktion" type="button" onclick="lastOne(1,3)";></div>'+
		'<div class="divRight"><input name="" class="buttonRight" value="Schritt 4: Hamburger Hafen" type="button" onclick="nextOne(3,3)";></div>'+
		'</div>';
		
		// CONTENT: Hafen Hamburg
		var contentHamburg = 
		'<div class="infoWindow_image">'+
        '<img src="images/hafenhamburg.jpg" width="400" height="260">'+
		'<br><br>'+
		'</div>'+

	 	'<div class="infoWindow_head">'+
        'Hafen: Hamburg'+
		'</div>'+
		
		'<div class="infoWindow_text">'+
		'Mit einem Gesamtumschlagsvolumen von über 121 mio. Tonnen Fracht, ist der Hamburger Hafen der größte Hafen Deutschlands. Die Möbelstücke erreichen hier mit dem Containerschiff Deutschland. Nach dem Löschen der Fracht und dem Weg der Waren durch den Zoll machen sich die Massagestühle per LKW auf den Weg zur Firmenzentrale.'+
        '<br><br><br> '+
		'<div class="divLeft"><input class="buttonLeft" value="Schritt 3: Hafen Hongkong" type="button" onclick="lastOne(2,6)";></div>'+
		'<div class="divRight"><input name="" class="buttonRight" value="Schritt 5: Warenlager" type="button" onclick="nextOne(4,6)";></div>';
		'</div>';
		
		// CONTENT: Kunde
		var contentCustomer = 
		'<div class="infoWindow_image">'+
        '<img src="images/auslieferung.jpg" width="447" height="238">'+
		'<br><br>'+
		'</div>'+

	 	'<div class="infoWindow_head">'+
        'Kunde: Anlieferung'+
		'</div>'+
		
		'<div class="infoWindow_text">'+
		'Nach einer Bestellung werden die Massagestühle von einer Spedition im Lager abgeholt. Ein bis zwei Tage später trifft die Lieferung beim Kunden ein. Ein Mitarbeiter der Firma koordiniert den Aufbau und die Inbetriebnahme aller Systeme. Nach einer kurzen Einweisung ist das Produkt einsatzbereit.'+
        '<br><br><br> '+
		'<div class="divLeft"><input class="buttonLeft" value="Schritt 5: Warenlager" type="button" onclick="lastOne(4,6)";></div>'+
		'</div>';
	
	// Array: Informationsfenster
	var allWindows = [];
	
	// Array: Marker
	var allMarkers = [];
	 
	// Vordefinierte Punkte auf der Karte die jeweils
	// einen Schritt im Produktionsweg repräsentieren
	var geo_center = new google.maps.LatLng(31.268980, 56.808338);
	var production = new google.maps.LatLng(23.476910, 111.279170);
	var hongkong = new google.maps.LatLng(22.322764, 114.170688);
	var hamburg = new google.maps.LatLng(53.536846, 9.780460);
	var pffm = new google.maps.LatLng(49.247779, 7.358537);
	var customer = new google.maps.LatLng(48.139127, 11.580186);
	var sBottom = new google.maps.LatLng(-5.516960029906727, 71.87202734375);

	// Karte initialisieren
	var map = null;
	
	// Definieren der Icons
    var customIcons = {
      production: {
        icon: 'icons/production.png',
      },
	  office: {
        icon: 'icons/office.png',
      },
	  ship: {
        icon: 'icons/ship.png',
      },
	  transport: {
        icon: 'icons/transport.png',
      }, 
	  customer: {
        icon: 'icons/customer.png',
      }, 
    };
	
	// LatLngBounds Objekt
	// Dient zur Ermittlung des optimalen Zoomfaktors
	// und der Ausrichtung der Karte
	var latlngbounds = new google.maps.LatLngBounds();
	
	// LatLngBounds Objekt so erweitern,
	// dass alle Punkte sichtbar sind
	latlngbounds.extend(pffm);
	latlngbounds.extend(hongkong);
	latlngbounds.extend(production);
	latlngbounds.extend(hamburg);
	latlngbounds.extend(customer);
	latlngbounds.extend(sBottom);	
	
	// Initialisierung der Karte
    function load() {
      map = new google.maps.Map(document.getElementById("map"), {
        mapTypeId: 'terrain',
		navigationControl: false,
  		mapTypeControl: false,
  		scaleControl: false,
		mapTypeId: google.maps.MapTypeId.ROADMAP
      });

	  // Stationen anzeigen
	  produce();
	  start();
	  office();
	  kunde();
	  transportHamburg();
	  transportHongKong();
	  
	  // Transportwege einzeichnen
	  shipPath();
	  ProductionHongKongPath();
	  HamburgFirmenzentralePath();
	  FirmenzentraleKundePath();
	  
	  
	  // Das Zentrum der Karte auf den
	  // Startpunkt ausrichten
	  map.setCenter(new google.maps.LatLng(allMarkers[0].getPosition().lat(),
	  									   allMarkers[0].getPosition().lng()));
		
	  // Das erste Informationsfenster öffnen
	  allWindows[0].open(map,allMarkers[0]);
	  
	  // Index der Selectbox auf den entsprechenden Index setzen
	  document.getElementById("select").selectedIndex = 2;
	 	
	  // Die Karte so skalieren, dass alle Marker sichtbar sind 
	  map.fitBounds(latlngbounds);

    }
	
	// Funktion die die Firmenzentrale darstellt
	function office(){

		// Icon wählen
		var type = "office";
	    var icon = customIcons[type] || {};
	
		// Marker setzen
		var marker_office = new google.maps.Marker({
			position: pffm, 
			map: map,
			icon: icon.icon,
			title:"Firmenzentrale"
		});
		
		// Informationsfenster zum Marker hinzufügen
		var infowindow = new google.maps.InfoWindow({
    		content: contentPFFM
		});
		
		// ActionListener zum Marker hinzufügen --> Click
		google.maps.event.addListener(marker_office, 'click', function() {
  			infowindow.open(map,marker_office);
			
		}); 
		
		allWindows[4] = infowindow;
		allMarkers[4] = marker_office;

	}
	
	// Den Startpunkt darstellen
	function start(){

		// Icon wählen
		var type = "office";
	    var icon = customIcons[type] || {};
	
		// Marker setzen
		var marker_start = new google.maps.Marker({
			position: pffm, 
			map: map,
			icon: icon.icon,
			title:"Wilkommen bei der PFFM"
		});
		
		// Informationsfenster zum Marker hinzufügen
		var infowindow = new google.maps.InfoWindow({
    		content: contentStart
		});
		
		// ActionListener zum Marker hinzufügen --> Click
		google.maps.event.addListener(marker_start, 'click', function() {
  			infowindow.open(map,marker_start);
			
		}); 
		
		allWindows[0] = infowindow;
		allMarkers[0] = marker_start;

	}

	
	// Zeichnet auf der Karte den Hafen in HongKong
	function transportHongKong(){
		
		// Icon wählen
		var type = "ship";
	    var icon = customIcons[type] || {};
		
		// Marker setzen
		var marker_hongkong = new google.maps.Marker({
			position: hongkong, 
			map: map,
			icon: icon.icon,
			title:"Hafen Hong Kong"
		});
		
		// Informationsfenster zum Marker hinzufügen 
		var infowindow = new google.maps.InfoWindow({
    		content: contentHongKong
		});
		
		// ActionListener zum Marker hinzufügen --> Click
		google.maps.event.addListener(marker_hongkong, 'click', function() {
  			infowindow.open(map,marker_hongkong);
		}); 
		
		allWindows[2] = infowindow;
		allMarkers[2] = marker_hongkong;
	}
	
	// Den Hamburger Hafen auf der Karte darstellen
	function transportHamburg(){
		
		// Icon wählen
		var type = "ship";
	    var icon = customIcons[type] || {};
	
		// Marker setzen
		var marker_hamburg = new google.maps.Marker({
			position: hamburg, 
			map: map,
			icon: icon.icon,
			title:"Hamburger Hafen"
		});
		
		// Informationsfenster zum Marker hinzufügen 
		var infowindow = new google.maps.InfoWindow({
    		content: contentHamburg
		});
		
		// ActionListener zum Marker hinzufügen  --> Click
		google.maps.event.addListener(marker_hamburg, 'click', function() {
  			infowindow.open(map,marker_hamburg);
		}); 
		
		allWindows[3] = infowindow;
		allMarkers[3] = marker_hamburg;

	}
	
	
	// Funktion die den Produktionsort darstellt
	function produce(){
		
		// Icon Typ setzen
		var type = "production";
	    var icon = customIcons[type] || {};
	
		// Marker initialisieren
		var marker_production = new google.maps.Marker({
			position: production, 
			map: map,
			icon: icon.icon,
			title:"Produktion"
		});
		
		// Informationsfenster initialisieren
		var infowindow = new google.maps.InfoWindow({
    		content: contentProduction
		});
		
		// Eventlistener (click) --> Marker
		google.maps.event.addListener(marker_production, 'click', function() {
  			infowindow.open(map,marker_production);
		}); 
		
		// Marker & Informationsfenster in globalem Array ablegen um
		// im Verlauf der Anwendung zu den einzelnen Fenstern springen zu können
		allWindows[1] = infowindow;
		allMarkers[1] = marker_production;
	}
	
	
		// Funktion die den Kunden darstellt
	function kunde(){
		
		// Icon Typ setzen
		var type = "customer";
	    var icon = customIcons[type] || {};
	
		// Marker initialisieren
		var marker_customer = new google.maps.Marker({
			position: customer, 
			map: map,
			icon: icon.icon,
			title:"Kunde"
		});
		
		// Informationsfenster initialisieren
		var infowindow = new google.maps.InfoWindow({
    		content: contentCustomer
		});
		
		// Eventlistener (click) --> Marker
		google.maps.event.addListener(marker_customer, 'click', function() {
  			infowindow.open(map,marker_customer);
		}); 
		
		// Marker & Informationsfenster in globalem Array ablegen um
		// im Verlauf der Anwendung zu den einzelnen Fenstern springen zu können
		allWindows[5] = infowindow;
		allMarkers[5] = marker_customer;
	}

	
	// Funktion die den Schiffsweg darstellt
	function shipPath(){
		
		// Eckpunkte des Pfades, welche den
		// Schiffsweg der Waren repräsentiert
		var path = [
			new google.maps.LatLng(22.322764, 114.170688),
			new google.maps.LatLng(3.530891480782679, 110.03853125),
			new google.maps.LatLng(1.0776206224603648, 103.60054296875),
			new google.maps.LatLng(7.472426218332032, 95.77827734375),
			new google.maps.LatLng(1.516960029906727, 71.87202734375),
			new google.maps.LatLng(14.201481100016904, 53.414996093750005),
			new google.maps.LatLng(11.459494346401433, 43.922808593750005),
			new google.maps.LatLng(27.15783157173645, 34.782183593750005),
			new google.maps.LatLng(32.93578810068585, 33.375933593750005),
			new google.maps.LatLng(35.72950831899885, 13.446734375000005),
			new google.maps.LatLng(38.18719164156574, 9.931109375000005),
			new google.maps.LatLng(35.300271211109134, -9.932171874999995),
			new google.maps.LatLng(48.034703895289944, -10.635296874999995),
			new google.maps.LatLng(50.107144481903084, -2.1977968749999945),
			new google.maps.LatLng(50.55597556209505, 0.7904843750000055),
			new google.maps.LatLng(52.20150132050677, 2.8119687500000055),
			new google.maps.LatLng(53.995455930772096, 6.9428281250000055),
			new google.maps.LatLng(53.84664975596132, 9.216998046875005),
			new google.maps.LatLng(53.536846, 9.780460)
		];
	
		// Polyline Objekt initialisieren
		var shipPath = new google.maps.Polyline({
			path: path,
			strokeColor: "#FF6600",
			strokeOpacity: 1.0,
			strokeWeight: 4
		});
	  
		// Schiffsweg auf der Karte platzieren
		shipPath.setMap(map);
	}

	
	// Funktion die den Pfad zwischen
	// Produktion und Verschiffung darstellt
	function ProductionHongKongPath(){
		
		// Eckpunkte durch die die Linie führen soll
		var path = [
			production,
			hongkong
		];
	
		// Polyline Objekt initialisieren
		var productionHongKongPath = new google.maps.Polyline({
			path: path,
			strokeColor: "#FF0000",
			strokeOpacity: 1.0,
			strokeWeight: 4
		});
	  
	  	// Pfad auf der Karte platzieren
		productionHongKongPath.setMap(map);
	}
	
	// Funktion die den Pfad zwischen dem
	// Hamburger Hafen und der Firmenzentrale
	// darstellt
	function HamburgFirmenzentralePath(){
		
		// Eckpunkte durch die die Linie führen soll
		var path = [
			hamburg,
			pffm
		];
	
		// Polyline Objekt initialisieren
		var hamburgFirmenzentralePath = new google.maps.Polyline({
			path: path,
			strokeColor: "#FF00FF",
			strokeOpacity: 1.0,
			strokeWeight: 4
		});
	  	
		// Pfad auf der Karte anzeigen
		hamburgFirmenzentralePath.setMap(map);
		
	}
	
		// Funktion die den Pfad zwischen der
		// Firmenzentrale und dem Kunden auf der Karte
		// darstellt
		function FirmenzentraleKundePath(){
		
		// Eckpunkte durch die die Linie führen soll
		var path = [
			pffm,
			customer
		];
	
		// Polyline Objekt initialisieren
		var firmenzentraleKundePath = new google.maps.Polyline({
			  path: path,
			  strokeColor: "#FF00FF",
			  strokeOpacity: 1.0,
			  strokeWeight: 4
		});
	  	
		// Pfad auf der Karte anzeigen
		firmenzentraleKundePath.setMap(map);
		
	}
	
	// Funktion die zum nächsten Schritt des
	// Produktweges springt
	function nextOne(next,zoomfac){
		
		// SelectBox auf entsprechenden Wert setzen
		document.getElementById("select").selectedIndex = next+2;
		
		// Das vorherige Informationsfenster schließen
		allWindows[next-1].close();
		
		// Die Karte auf den nächsten Punkt ausrichten
		map.setCenter(new google.maps.LatLng(allMarkers[next].getPosition().lat(),
											 allMarkers[next].getPosition().lng()));	
		// Zoomfaktor setzen
		map.setZoom(zoomfac);
		
		// Das dem Punkt entsprechende Informationsfenster öffnen
		allWindows[next].open(map,allMarkers[next]);
	}
	
	// Funktion die zum vorherigen Schritt des
	// Produktweges springt
	function lastOne(last,zoomfac){
		document.getElementById("select").selectedIndex = last+2;
		map.setCenter(new google.maps.LatLng(allMarkers[last].getPosition().lat(),allMarkers[last].getPosition().lng()));	
		map.setZoom(zoomfac);
		allWindows[last].open(map,allMarkers[last]);
		allWindows[last+1].close();
	}

	
	// Karte auf einen bestimmten Punkt ausrichten
	// und das dazugehörige Informationsfenster
	// öffnen
	function goToAndOpen(myplace, myzoom, place){
		map.panTo(myplace);
		map.setZoom(myzoom);
		
		// Alle möglicherweise offenen
		// Informationsfenster schließen
		for(var i = 0; i < allWindows.length; i++){
			allWindows[i].close();	
		}
		
		// Zum Ort gehörendes Informationsfenster
		// öffnen
		allWindows[place].open(map,allMarkers[place]);
	}
	
	// Übersicht anzeigen, alle offnen Fenster ausblenden
	function showAll(){
		
		// Karte auf alle Stationen ausrichten
		map.fitBounds(latlngbounds);
		
		// Alle geöffneten Fenster schließen
		for(var i = 0; i < allWindows.length; i++){
			allWindows[i].close();	
		}
	}
